<template>
  <div style="padding: 20px 15px 0px 15px; display: flex; justify-content: space-between">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="关键字:">
        <el-space>
          <el-input v-model="formInline.user" placeholder="请输入关键子或者模型拼音首字母进行搜索" clearable style="width: 320px" />
          <el-tag type="primary" size="small">
            <span>更多</span>
            <el-icon> <ArrowDownBold /> </el-icon
          ></el-tag>
        </el-space>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="primary" @click="addFormDialog">新增</el-button>
      <el-button type="danger" @click="onSubmit">批量删除</el-button>
    </div>
  </div>
  <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: calc(100% - 80px)">
    <el-table :data="tableData" border style="width: 100%; height: calc(100% - 38px)">
      <el-table-column type="index" width="40" v-if="showRowNum" :render-header="renderHeader" />
      <el-table-column type="selection" width="40" v-if="selection" />
      <el-table-column prop="modelName" label="模型名称" width="250" />
      <el-table-column prop="domainName" label="业务领域" width="150px" />
      <el-table-column prop="amount2" label="接口数量" width="100px" align="right" />
      <el-table-column prop="name" label="关联数据库" min-width="380px">
        <template #default>
          <el-space>
            <el-tooltip class="box-item" effect="dark" content="【表】用户表" placement="bottom">
              <el-tag type="primary">SYS_USER</el-tag>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="【表】部门表" placement="bottom">
              <el-tag type="primary">SYS_DEPARTMENT</el-tag>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="【接口】获取患者信息接口" placement="bottom">
              <el-tag type="success">getPatientInfo</el-tag>
            </el-tooltip>
          </el-space>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="80px">
        <template #default>
          <el-tag type="success" effect="dark" size="small"> 已注册 </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default>
          <el-button link type="primary" size="small"> 编辑 </el-button>
          <el-button link type="danger" size="small"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px">
      <el-config-provider :locale="locale">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ComponentSize } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs';

import { onMounted, reactive, ref } from 'vue';

defineOptions({
  name: 'DwTable',
});
const emit = defineEmits(['onAddFormDialog']);
const locale = zhCn;

const props = defineProps({
  //初始化加载数据
  initedLoad: {
    type: Boolean,
    default: true,
  },
  selection: {
    type: Boolean,
    default: false,
  },
  showRowNum: {
    type: Boolean,
    default: false,
  },
  // columns: {
  //   type: Array<Column>,
  // },
});

const formInline = reactive({
  user: '',
  region: '',
  date: '',
});

const addFormDialog = () => {
  emit('onAddFormDialog');
};

const currentPage4 = ref(4);
const pageSize4 = ref(100);
const size = ref<ComponentSize>('default');
const background = ref(false);
const disabled = ref(false);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const renderHeader = (h, { column, $index }) => {
  return h('div', {}, '111');
};

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const onSubmit = () => {
  console.log('submit!');
};

interface Product {
  id: string;
  modelName: string;
  name: string;
  domainName: string;
  amount1: string;
  amount2: number;
  amount3: number;
  state: boolean;
}

const tableData: Product[] = [
  {
    id: '01',
    modelName: '科室字典',
    name: 'User',
    domainName: '基础字典',
    amount1: '234',
    amount2: 8,
    amount3: 10,
    state: true,
  },
  {
    id: '01',
    modelName: '性别字典',
    name: 'User',
    domainName: '基础字典',
    amount1: '234',
    amount2: 8,
    amount3: 10,
    state: true,
  },
];

onMounted(() => {
  if (props.initedLoad) {
    loadData();
  }
});

const loadData = () => {};
</script>
<style lang="scss" scoped>
.el-table__header {
  --el-table-tr-bg-color: #ccc;
}
</style>
